<template>
    <div>
        <p>
            <button @click="add()" class="btn btn-white btn-default btn-round">
                <i class="ace-icon fa  fa-pencil-square-o red2"></i>
                添加
            </button>
            &nbsp;
            <button @click="list(1)" class="btn btn-white btn-default btn-round">
                <i class="ace-icon fa   fa-arrow-circle-o-down red2"></i>
                刷新
            </button>
        </p>
        <pagination ref="pagination" v-bind:list="list"  v-bind:itemCount="2"></pagination>
        <div class="row" >
            <div class="col-xs-6 col-sm-4 col-md-3" v-for="course in courses">
                <div class="thumbnail search-thumbnail">
                    <img v-show="!course.image" class="media-object" src="/static/image/image-1.jpg" />
                    <img v-show="course.image" class="media-object" v-bind:src="course.image" />
                    <div class="caption">
                        <div class="clearfix">
                            <span class="pull-right label label-primary info-label">{{COURSE_LEVEL | optionKV(course.level)}}</span>
                            <span class="pull-right label label-primary info-label">{{COURSE_CHARGE | optionKV(course.charge)}}</span>
                            <span class="pull-right label label-primary info-label">{{COURSE_STATUS | optionKV(course.status)}}</span>
                        </div>

                        <h3 class="search-title">
                            <a href="#" class="blue">{{course.name}}</a>
                        </h3>

                        <p>
                            <span class="blue bolder bigger-150">{{course.price}}&nbsp;<i class="fa fa-rmb"></i></span>&nbsp;
                        </p>
                        <p>{{course.summary}}</p>
                        <p>
                            <span class="badge badge-info">{{course.id}}</span>
                            <span class="badge badge-info">排序：{{course.sort}}</span>
                            <span class="badge badge-info">{{course.time | formatSecond}}</span>
                        </p>
                        <p>
                            <button v-on:click="toChapter(course)" class="btn btn-white btn-info btn-round">
                                大章
                            </button>&nbsp;
                            <button v-on:click="toContent(course)" class="btn btn-white btn-info btn-round">
                                内容
                            </button>&nbsp;
                            <button v-on:click="openSortModal(course)" class="btn btn-white btn-info btn-round">
                                排序
                            </button>&nbsp;
                            <button v-on:click="update(course)" class="btn btn-white btn-info btn-round">
                                编辑
                            </button>&nbsp;
                            <button v-on:click="del(course.id)" class="btn btn-white btn-warning btn-round">
                                删除
                            </button>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div id="form-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">课程表单</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">分类</label>
                                            <div class="col-sm-10">
                                                <ul id="tree" class="ztree"></ul>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">名称</label>
                                            <div class="col-sm-10">
                                                <input v-model="course.name" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">讲师</label>
                                            <div class="col-sm-10">
                                                <select v-model="course.teacherId" class="form-control">
                                                    <option v-for="o in teachers" v-bind:value="o.id">{{o.name}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">概述</label>
                                            <div class="col-sm-10">
                                                <input v-model="course.summary" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">时长</label>
                                            <div class="col-sm-10">
                                                <input disabled="disabled" v-model="course.time" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">价格（元）</label>
                                            <div class="col-sm-10">
                                                <input v-model="course.price" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">封面</label>
                                            <div class="col-sm-10">
                                                <file v-bind:input-id="'image-upload'"
                                                      v-bind:text="'上传封面'"
                                                      v-bind:suffixs="['jpg', 'jpeg', 'png']"
                                                      v-bind:after-upload="afterUpload"></file>
                                                <div v-show="course.image" class="row">
                                                    <div class="col-md-6">
                                                        <img v-bind:src="course.image" class="img-responsive">
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">级别</label>
                                            <div class="col-sm-10">
                                                <select v-model="course.level" class="form-control">
                                                    <option v-for="o in COURSE_LEVEL" v-bind:value="o.key">{{o.value}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">收费</label>
                                            <div class="col-sm-10">
                                                <select v-model="course.charge" class="form-control">
                                                    <option v-for="o in COURSE_CHARGE" v-bind:value="o.key">{{o.value}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">状态</label>
                                            <div class="col-sm-10">
                                                <select v-model="course.status" class="form-control">
                                                    <option v-for="o in COURSE_STATUS" v-bind:value="o.key">{{o.value}}</option>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">报名数</label>
                                            <div class="col-sm-10">
                                                <input v-model="course.enroll" class="form-control">
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label" >顺序</label>
                                            <div class="col-sm-10">
                                                <input v-model="course.sort" disabled="disabled" class="form-control">
                                            </div>
                                        </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button v-on:click="save()" type="button" class="btn btn-primary">保存</button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div>
        <div id="course-sort-modal" class="modal fade" tabindex="-1" role="dialog">
            <div class="modal-dialog" role="document">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                        <h4 class="modal-title">排序</h4>
                    </div>
                    <div class="modal-body">
                        <form class="form-horizontal">
                            <div class="form-group">
                                <label class="control-label col-lg-3">
                                    当前排序
                                </label>
                                <div class="col-lg-9">
                                    <input class="form-control" v-model="sort.oldSort" name="oldSort" disabled>
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="control-label col-lg-3">
                                    新排序
                                </label>
                                <div class="col-lg-9">
                                    <input class="form-control" v-model="sort.newSort" name="newSort">
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-white btn-default btn-round" data-dismiss="modal">
                            <i class="ace-icon fa fa-times"></i>
                            取消
                        </button>
                        <button type="button" class="btn btn-white btn-info btn-round" v-on:click="updateSort()">
                            <i class="ace-icon fa fa-plus blue"></i>
                            更新排序
                        </button>
                    </div>
                </div><!-- /.modal-content -->
            </div><!-- /.modal-dialog -->
        </div><!-- /.modal -->
    </div>
</template>
<script>
    import pagination from "../../components/pagination";
    import File from "../../components/file";
    export default {
        name: 'course',
        components:{pagination,File},
        mounted() {//在组件内容被渲染到页面之【后】立即执行的函数
            let _this = this;
            $('body').attr('class', 'no-skin');
            //默认分页每页显示5条
            _this.$refs.pagination.size = 5;
            _this.list(1);
            _this.getAllTeachers();//获取全部讲师
            _this.getAllCategory();//获取全部分类
        },
        data(){
            return{
                courses:[],
                teachers:[],
                categorys:[],
                course:{},
                tree:{},
                sort:{},
                COURSE_STATUS:COURSE_STATUS,
                COURSE_CHARGE:COURSE_CHARGE,
                COURSE_LEVEL:COURSE_LEVEL,

            }
        },
        methods:{
            //进行Axios异步通讯
            list(page){
                //加载框显示
                Loading.show();
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER+"/business/course/getAllCourses",{
                    page:page,
                    size:_this.$refs.pagination.size,
                }).then(function (response) {
                    let responseBody = response.data;//获取到axios响应的结果对象
                    _this.courses = responseBody.list;//获取查询的结果
                    //渲染分页组件的效果
                    _this.$refs.pagination.render(page, responseBody.total);
                    //加载框显示
                    Loading.hide();
                });
            },
            //添加操作
            add(){
                //清空当前对象
                let _this = this;
                _this.course = {
                    sort : _this.$refs.pagination.total+1
                };
                //弹出添加窗口
                $("#form-modal").modal("show");
                _this.initZtree();
            },
            //更新操作
            update(course){
                let _this = this;
                //获取选中行的数据
                _this.course = $.extend({}, course);
                //弹出添加窗口
                $("#form-modal").modal("show");
                _this.initZtree();
                //执行选中已有的分类
                _this.getCourseCategorys(course.id);
            },
            //调用后台接口完成数据的添加和更新
            save(){
                let _this = this;
                //获取zTree选中的分类
                _this.course.categorys = _this.tree.getCheckedNodes();
                _this.$ajax.post(process.env.VUE_APP_SERVER+"/business/course/save",_this.course).then(function (response) {
                    let responseBody = response.data;//获取到axios响应的结果对象
                    //将弹出框消失
                    $("#form-modal").modal("hide");
                    //弹出接口返回的提示
                    Toast.success(responseBody.msg);//获取查询的结果
                    //刷新页面
                    _this.list(1);
                    /* //渲染分页组件的效果
                     _this.$refs.pagination.render(page, responseBody.total);*/
                });
            },
            getAllTeachers(){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER+"/business/teacher/getAll").then(function (response) {
                    let responseBody = response.data;//获取到axios响应的结果对象
                    _this.teachers = responseBody.teachers;
                });
            },
            initZtree(){
                let _this = this;
                var setting = {
                    check: {
                        enable: true
                    },
                    data: {
                        simpleData: {
                            idKey: "id",
                            pIdKey: "parent",
                            rootPId: "00000000",
                            enable: true
                        }
                    }
                };
               let zNodes = _this.categorys;
               _this.tree = $.fn.zTree.init($("#tree"), setting, zNodes);//初始化zTree，并返回当前树状结构对象
            },
            //删除数据
            del(id){
                let _this = this;
                //确认框
                Confirm.show("数据删除后将无法恢复,确定删除吗?",function(){
                    _this.$ajax.get(process.env.VUE_APP_SERVER+"/business/course/deleteCourse?id="+id).then(function (response) {
                        let responseBody = response.data;//获取到axios响应的结果对象
                        //弹出接口返回的提示
                        Toast.success(responseBody.msg);//获取查询的结果
                        //刷新页面
                        _this.list(1);
                        /* //渲染分页组件的效果
                         _this.$refs.pagination.render(page, responseBody.total);*/
                    });
                });

            },
            //课程下面的分类
            getCourseCategorys(courseId){
                let _this = this;
                _this.$ajax.get(process.env.VUE_APP_SERVER+"/business/course/getCategorysByCourseId/"+courseId).then(function (response) {
                    let responseBody = response.data;//获取到axios响应的结果对象
                    let courseCategorys = responseBody.courseCategorys;//获取查询的结果
                    // 勾选查询到的分类
                    _this.tree.checkAllNodes(false);
                    for (let i = 0; i < courseCategorys.length; i++) {
                        //获取当前节点
                        let node = _this.tree.getNodeByParam("id", courseCategorys[i].categoryId);
                        //选中当前的节点
                        _this.tree.checkNode(node, true);
                    }
                });
            },
            //查询全部分类
            getAllCategory(){
                //加载框显示
                let _this = this;
                _this.$ajax.post(process.env.VUE_APP_SERVER+"/business/category/getAllCategorys").then(function (response) {
                    let responseBody = response.data;//获取到axios响应的结果对象
                    _this.categorys = responseBody.categorys;//获取查询的结果
                });
            },
            afterUpload(resp) {
                let _this = this;
                let filePath = resp.uploadFile.path;
                _this.course.image = filePath;
                // 解决不能实时预览的问题
                _this.$forceUpdate();
            },
            toChapter(course){
                //将当前课程对象存储起来
                SessionStorage.set("course",course)
                this.$router.push("/business/chapter")
            },
            toContent(course){
                //将当前课程对象存储起来
                SessionStorage.set("course",course)
                this.$router.push("/business/content")
            },
            openSortModal(course) {
                let _this = this;
                _this.sort = {
                    id: course.id,
                    oldSort: course.sort,
                    newSort: course.sort
                };
                $("#course-sort-modal").modal("show");
            },
            /**
             * 排序
             */
            updateSort() {
                let _this = this;
                if (_this.sort.newSort === _this.sort.oldSort) {
                    Toast.warning("排序没有变化");
                    return;
                }
                Loading.show();
                _this.$ajax.post(process.env.VUE_APP_SERVER + "/business/course/sort", _this.sort).then((res) => {
                    let response = res.data;

                    if (response.success) {
                        Toast.success("更新排序成功");
                        $("#course-sort-modal").modal("hide");
                        _this.list(1);
                    } else {
                        Toast.error("更新排序失败");
                    }
                });
            },

        }
    }
</script>
